import React, { useState, useEffect } from 'react';
import { Table, Button, notification, Popconfirm, Tooltip } from 'antd';
import SearchList from '@/components/SearchList';
import {
  EyeFilled,
  PlusCircleFilled,
  EditOutlined,
  DeleteFilled,
  LockOutlined,
  RedoOutlined,
  UnlockOutlined,
} from '@ant-design/icons';
import API from '@/api';
import { transFormIndex, showDeleteConfirm } from '@/utils/util';
const userManagement = ({ history }) => {
  const [list, setList] = useState([]);
  const [pagination, setPagination] = useState({
    showQuickJumper: true,
  });
  const searchList = [
    {
      name: 'username',
      title: '用户账号',
      type: 'input',
    },
    {
      name: 'name',
      title: '用户姓名',
      type: 'input',
    },
    {
      name: 'orgName',
      title: '单位',
      type: 'input',
    },
    {
      name: 'state',
      title: '用户状态',
      type: 'select',
      otherProps: {
        options: [
          {
            label: '启用',
            value: '1',
          },
          {
            label: '禁用',
            value: '2',
          },
        ],
      },
    },
  ];

  const [params, setParams] = useState({
    pageNo: 1,
    pageSize: 10,
  });
  const initList = (data = {}) => {
    const values = { ...params, ...data };
    API.selectSysUserList(values).then((res) => {
      if (res?.t) {
        setList(res.t.queryList);
        setPagination({
          ...pagination,
          total: res.t.totalSize,
          current: res.t.currentPage,
          pageSize: res.t.pageSize,
        });
      }
    });
  };
  const changeTable = (pagination) => {
    setParams({
      ...params,
      pageNo: pagination.current,
      pageSize: pagination.pageSize,
    });
  };
  const resetFn = (id) => {
    API.resetPassword({ id }).then((res) => {
      if (res) {
        notification.success({
          message: '重置成功',
        });
        initList();
      }
    });
  };

  const freezeFn = (r) => {
    const state = r.state === 1 ? 2 : 1;
    API.disableUser({
      state,
      id: r.id,
    }).then((res) => {
      if (res) {
        notification.success({
          message: (state === 1 ? '启用' : '禁用') + '成功',
        });
        initList();
      }
    });
  };
  const delFn = (id) => {
    API.delSysUser({ id }).then((res) => {
      if (res) {
        notification.success({
          message: '删除成功',
        });
        initList();
      }
    });
  };
  useEffect(() => {
    initList(params);
  }, [params]);
  const searchFn = (data) => {
    setParams({
      ...data,
      pageNo: 1,
      pageSize: 10,
    });
  };
  const columns = [
    {
      title: '序号',
      dataIndex: 'Index',
      align: 'center',
      render: (text, r, index) => transFormIndex(pagination, index),
    },
    {
      title: '用户账号',
      dataIndex: 'username',
    },
    {
      title: '用户姓名',
      dataIndex: 'name',
    },
    {
      title: '单位',
      dataIndex: 'orgName',
      render: (text) => text || '-',
    },
    {
      title: '联系方式',
      dataIndex: 'phone',
      width: 140,
    },
    {
      title: '角色',
      dataIndex: 'info',
    },
    {
      title: '创建人',
      dataIndex: 'createUser',
    },
    {
      title: '创建时间',
      dataIndex: 'createTime',
      render: (text) => text.split(' ').shift(),
    },
    {
      title: '状态',
      dataIndex: 'state',
      align: 'center',
      render: (text) =>
        text === 2 ? (
          <span style={{ color: 'red' }}>禁用</span>
        ) : (
          <span style={{ color: 'green' }}>启用</span>
        ),
    },
    {
      title: '操作',
      dataIndex: 'Operation',
      align: 'center',
      fixed: 'right',
      width: 220,
      render: (text, r) => (
        <div>
          <Tooltip title="查看">
            <Button
              type="link"
              icon={<EyeFilled />}
              className="table-icon"
              onClick={dispatchFn.bind(null, {
                type: 'detail',
                id: r.id,
              })}
            ></Button>
          </Tooltip>
          {r.immutable === 0 ? (
            ''
          ) : (
            <>
              <Tooltip title="编辑">
                <Button
                  type="link"
                  icon={<EditOutlined />}
                  className="table-icon"
                  onClick={dispatchFn.bind(null, {
                    type: 'edit',
                    id: r.id,
                  })}
                ></Button>
              </Tooltip>
              <Tooltip title="重置密码">
                <Popconfirm
                  title={'是否确定重置密码?'}
                  okText="是"
                  cancelText="否"
                  onConfirm={() => resetFn(r.id)}
                >
                  <Button
                    type="link"
                    icon={<RedoOutlined />}
                    className="table-icon"
                  ></Button>
                </Popconfirm>
              </Tooltip>
              {/* <Tooltip title={r.state === 1 ? '禁用' : '启用'}>
                <Popconfirm
                  title={'是否确定' + (r.state === 1 ? '禁用' : '启用') + '?'}
                  okText="是"
                  cancelText="否"
                  onConfirm={() => freezeFn(r)}
                >
                  <Button
                    type="link"
                    icon={r.state === 1 ? <LockOutlined /> : <UnlockOutlined />}
                    className="table-icon"
                  ></Button>
                </Popconfirm>
              </Tooltip>
              <Tooltip title="删除">
                <Button
                  type="link"
                  icon={<DeleteFilled />}
                  className="table-icon"
                  onClick={() => showDeleteConfirm(delFn.bind(null, r.id))}
                ></Button>
              </Tooltip> */}
            </>
          )}
        </div>
      ),
    },
  ];

  const dispatchFn = (action) => {
    history.push({
      pathname: `/system/user/${action.type}`,
      query: {
        id: action.id,
      },
    });
  };
  return (
    <>
      <SearchList searchList={searchList} initList={searchFn}></SearchList>
      <div className="bgf main-x">
        {/* <div className="tools-x">
          <Button
            type="link"
            icon={<PlusCircleFilled />}
            className="btn-icon"
            onClick={dispatchFn.bind(null, {
              type: 'create',
            })}
          >
            新增
          </Button>
        </div> */}
        <Table
          columns={columns}
          rowKey="id"
          dataSource={list}
          onChange={changeTable}
          className="custom-table"
          pagination={pagination}
          scroll={{ x: 1400 }}
        ></Table>
      </div>
    </>
  );
};

export default userManagement;
